import React, { useState,useRef } from "react";
// import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import api from "../../server/Api";
import './addBase.css'
import { Button, Modal, Form, Input, Radio, Select } from 'antd'
import axios from "axios";


export default function Add(props) {
  const addform=useRef()
  // 下拉菜单
  let input1 = ''
  let input2 = ''

  let formsub = {
    unit: "",
    type: "",
    name: "",
    price: ""
  }
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  }

  const onChange = (e) => {
    formsub.unit = e.target.value
  }

  const change1 = (event) => {
    input1 = event.target.value
    formsub.name = input1
  }

  const change2 = (event) => {
    input2 = event.target.value
    formsub.price = input2
  }

  const onGenderChange = (value) => {
    formsub.type = value
  };

  const [isModalOpen, setIsModalOpen] = useState(false)
  // 点击新增
  const showModal = () => {
setIsModalOpen(true);
    addform.current.resetFields();
    
    
  };
  // 提交
  const handleOk = () => {
    formsub.price
    setIsModalOpen(false);
    console.log(formsub);
    axios.post(`${api}/addBasicPrice`, formsub
    ).then(response => {
      if (response.data.code === 200) {
        props.fn(123)
      }
    }).catch(function (error) { })

  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //   表单
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return <>
    <Button type="primary" className="btn" onClick={showModal}>新增基价</Button>
    <Modal title="新增基价" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <Form
        ref={addform}
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >

        <Form.Item
          label="客户类型"
        >
          <Radio.Group onChange={onChange} >
            <Radio value="个人" > 个人</Radio>
            <Radio value="企业"> 企业</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          label="计费类型"
        >
          {/* 下拉列表 */}
          <Form.Item
            name="gender"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="请选择计费类型"
              onChange={onGenderChange}
              allowClear
            >
              <Select.Option value="居民生活用水">居民生活用水</Select.Option>
              <Select.Option value="非居民生活用水">非居民生活用水</Select.Option>
              <Select.Option value="学校">学校</Select.Option>
            </Select>
          </Form.Item>
        </Form.Item>

        <Form.Item
          label="基价名称"
          name="pricename"
          rules={[
            {
              required: true,
              message: '请输入基价名称!',
            },
          ]}
        >
          <Input onChange={change1} />
        </Form.Item>

        <Form.Item
          label="基价金额"
          name="price"
          rules={[
            {
              required: true,
              message: '请输入基价金额,且必须是数字',
              pattern: /^[0-9]+$/
            },
          ]}
        >
          <Input onChange={change2} />
        </Form.Item>

      </Form>
    </Modal>
  </>
}